<template>
    <a-tabs v-model:activeKey="activeKey" class="tab-page-container" id="innov-editor" >
        <template #leftExtra>
            <div class="page-title-area">
                {{ props.title }}
            </div>
        </template>
        <a-tab-pane key="introduce" tab="填写说明" class="page-pane nopadding" v-if="data.basicInfo.isNew">
            <div class="paper-container app-intro">
                <div class="page-div">
                    <div class="fill-introduce-title">
                        填写说明
                    </div>
                    <p class="fill-introduce">
                        1、本申请书所列各项内容均须实事求是，认真填写，表达明确严谨，简明扼要，申报书请按顺序逐项填写，填写内容必须实事求是，<strong>空缺项要填“无”</strong>。
                    </p>
                    <p class="fill-introduce">
                        2、申请人可以是个人，也可为创新团队，可以在<a href="javascript: void(0)" @click="toTab('members')">项目成员选项卡</a>中配置。指导教师一栏的第一项
                        即是负责项目审核的指导老师，参与者一栏的第一项即是项目的负责人。
                    </p>
                    <p class="fill-introduce">
                        3、每个选项卡填写完成后，点击“保存”按钮即可保存数据。直接点击上方按钮切换选项卡时，也可以保存项目。
                    </p>
                    <p class="fill-introduce">
                        4、全部填写完毕后，在<a href="javascript: void(0)" @click="toTab('final-check')">检查并提交选项卡</a>中复查一次。全部检查完成后，拉到此选项卡
                        页面的最下方，点击“提交”按钮即可提交项目。<strong>项目提交后，{{ data.basicInfo.Status === 0 ? '指导老师老师' : "院级管理员" }}审核前</strong>可以重新修改并提交。
                    </p>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="members" class="page-pane nopadding" forceRender="true">
            <template #tab>
                <a-icon v-if="memberCheck&&trySubmit" icon="check-circle-filled" class="color-success"></a-icon>
                <a-icon v-else-if="(!memberCheck)&&trySubmit" icon="close-circle-filled" class="color-error"></a-icon>
                项目成员
            </template>
            <div class="paper-container app-intro">
                <div class="page-div narrow w1k">
                    <member-editor ref="memberEditorRef"/>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="basic-info" class="page-pane nopadding" forceRender="true">
            <template #tab>
                <a-icon v-if="basicCheck&&trySubmit" icon="check-circle-filled" class="color-success"></a-icon>
                <a-icon v-else-if="(!basicCheck)&&trySubmit" icon="close-circle-filled" class="color-error"></a-icon>
                基本信息
            </template>
            <div class="paper-container">
                <div class="page-div narrow w1k">
                    <basic-info-editor ref="basicInfoEditorRef"/>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="basis" class="page-pane nopadding" forceRender="true">
            <template #tab>
                <a-icon v-if="trySubmit" icon="check-circle-filled" class="color-success"></a-icon>
                项目简介和立项依据
            </template>
            <div class="paper-container">
                <div class="page-div narrow w1k">
                    <text-editor />
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="badgets" class="page-pane nopadding" forceRender="true">
            <template #tab>
                <a-icon v-if="budgetCheck&&trySubmit" icon="check-circle-filled" class="color-success"></a-icon>
                <a-icon v-else-if="(!budgetCheck)&&trySubmit" icon="close-circle-filled" class="color-error"></a-icon>
                经费预算
            </template>
            <div class="paper-container app-budget">
                <div class="page-div narrow w1k">
                    <budget-editor ref="budgetEditorRef"/>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="final-check" tab="检查并提交" class="page-pane nopadding" forceRender="true">
            <check-view :data :is-check="true" ref="checkViewRef"/>
            <a-button type="primary" :disabled="haveSubmitted" @click="handleSubmit" size="large" class="submit-button">提交</a-button>
        </a-tab-pane>
    </a-tabs>
</template>

<script setup>
import app from '@/app'
import {ref, reactive, watchEffect, provide, inject, h} from 'vue';
import MemberEditor from './editors/member-editor.vue'
import BudgetEditor from './editors/budget-editor.vue'
import TextEditor from './editors/text-editor.vue'
import BasicInfoEditor from './editors/basic-info-editor.vue'
import checkView from './view.vue'
import {Modal} from "ant-design-vue";
const budgetEditorRef = ref();
const checkViewRef = ref();
const basicInfoEditorRef = ref();
const memberEditorRef = ref();
const memberCheck = ref(false);
const basicCheck = ref(false);
const budgetCheck = ref(false);
const trySubmit = ref(false);
const haveSubmitted = ref(false);
const props = defineProps({
    title: String
})
const activeKey = ref("basic-info");
const data = inject("data");
if (!data.basicInfo.isNew) {
    activeKey.value = "members";
}

async function handleSubmit () {
    trySubmit.value = true;

    const results = await Promise.allSettled([
        memberEditorRef.value.validate(),
        basicInfoEditorRef.value.validate(),
        budgetEditorRef.value.validate()
    ]);

    const checks = ['memberCheck', 'basicCheck', 'budgetCheck'];
    let firstErrorIndex = null;

    for (let i = 0; i < results.length; i++) {
        const check = checks[i];
        const result = results[i];
        if (result.status === 'fulfilled') {
            eval(`${check}.value = ${result.value}`);
            if (!eval(`${check}.value`)) {
                firstErrorIndex = i;
            }
        }else{
            Modal.error({
                title: '提交失败',
                content: '请重试！',
            });
            return;
        }
    }
    if (firstErrorIndex !== null) {
        Modal.error({
            title: '提交失败',
            content: '请检查填写的信息是否有误！',
        });
        return;
    }
    Modal.confirm({
        title: '您确定要提交项目吗？',
        content: h('div', { }, [
            h('p', {style: { color: 'red' }}, '提交后将无法修改项目信息，项目将进入审核阶段！')
        ]),
        onOk() {
            // 提交逻辑
            haveSubmitted.value = true;
        },
    });

};

function toTab (key) {
    activeKey.value = key;
}

</script>

<style lang="less">
@import url('../app-form.less');
#innov-editor {
    .page-div.w1k {
        width: 1000px;
    }
}
.submit-button {
    position: fixed;
    top: calc(@nav-header-height + 36px);
    left: calc(50% - 380px);
    width: 85px;
    height: 40px;
}
</style>